<template>
  <div>
    <el-card style="margin-bottom: 20px">
      <span style="margin-right: 8px">订单号查询</span>
      <el-input
        v-model="orderId"
        placeholder="请输入内容"
        clearable
        style="width: 200px; margin-right: 8px"
      ></el-input
      ><el-button type="primary" @click="getOrderByOrderId">搜索</el-button>
      <span style="margin-left: 25px; margin-right: 10px">手机号查询</span>
      <el-input
        v-model="phone"
        placeholder="请输入内容"
        clearable
        style="width: 200px; margin-right: 8px"
      ></el-input
      ><el-button type="primary" @click="getOrderByPhone">搜索</el-button>
    </el-card>
    <el-table
      ref="singleTable"
      :data="orderList"
      highlight-current-row
      style="width: 100%"
      border
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column property="orderId" label="订单号" width="100">
      </el-table-column>
      <el-table-column property="discount" label="折扣" width="80">
      </el-table-column>
      <el-table-column
        property="createTime"
        label="创建时间"
        width="100"
      ></el-table-column>
      <el-table-column property="phone" label="手机号"></el-table-column>
      <el-table-column property="totalPrice" label="总价(元)"></el-table-column>
      <el-table-column
        property="payMoney"
        label="实付金额(元)"
      ></el-table-column>
      <el-table-column
        property="saveMoney"
        label="优惠金额(元)"
        width="80"
      ></el-table-column>
      <el-table-column property="status" label="支付状态"></el-table-column>
      <el-table-column
        property="receiverName"
        label="收货人姓名"
      ></el-table-column>
      <el-table-column
        property="receiverAddress"
        label="收货地址"
      ></el-table-column>
      <el-table-column
        property="payMentTime"
        label="支付时间"
        width="100"
      ></el-table-column>
      <el-table-column
        property="receiveTime"
        label="收货时间"
        width="100"
      ></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="getOrdersList"
      :current-page="page"
      :page-sizes="[3, 5, 10]"
      :page-size="limit"
      layout=" prev, pager, next, jumper,->,total, sizes"
      :total="total"
      style="text-align: center; margin-top: 10px"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderId: "",
      phone: "",
      orderList: [],
      page: 1,
      limit: 3,
      total: 50,
    };
  },
  created() {
    this.getOrderByPage();
  },
  methods: {
    //获取订单（分页）
    async getOrderByPage() {
      let res = await this.$API.order.reqGetOrderByPage(this.page, this.limit);
      if (res.code === "200") {
        this.orderList = res.data.records;
        this.total = res.data.total;
      }
    },

    //根据订单号查询
    async getOrderByOrderId() {
      this.phone = "";
      if (this.orderId == "") {
        this.getOrderByPage();
        return;
      }
      let res = await this.$API.order.reqGetByOrderId(this.orderId);
      if (res.code === "200") {
        this.orderList = res.data;
      }
    },

    //根据手机号查询（分页）
    async getOrderByPhone() {
      this.orderId = "";
      if (this.phone == "") {
        this.getOrderByPage();
        return;
      }
      let res = await this.$API.order.reqGetByPhone(
        this.page,
        this.limit,
        this.phone
      );
      if (res.code === "200") {
        this.orderList = res.data.records;
        this.total = res.data.total;
      }
    },

    //切换每页显示数
    handleSizeChange(limits) {
      this.limit = limits;
      this.getGoodsList();
    },
    //分页器选择页码
    getOrdersList(pages = 1) {
      this.page = pages;
      if (this.selectClassify !== "") {
        this.selectByClassify();
      } else if (this.goodName !== "") {
        this.search();
      } else {
        this.getOrderByPage();
      }
    },
  },
};
</script>

<style>
</style>